<template>
  <div class="lshdiv">
    <div class="container-box">
      <!--操作区域-->
      <el-row type="flex" justify="space-between" class="tool-bar">
        <div style="margin-top: -6px">
          <el-form
            style="display: flex"
            ref="form"
            :inline="false"
            size="normal"
          >
            <el-form-item style="margin-right: 7px">
              <el-input
                v-model="queryData.tag_name"
                size="mini"
                placeholder="标签名称"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-right: 7px">
              <el-select
                v-model="queryData.subject_id"
                placeholder="请选择"
                size="mini"
                @change="allListChange"
              >
                <el-option
                  v-for="item in allList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 7px">
              <el-select
                v-model="queryData.directory_id"
                placeholder="归属目录"
                size="mini"
              >
                <el-option
                  v-for="item in catalogueList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 7px">
              <el-select
                v-model="queryData.is_show"
                placeholder="显示状态"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="mini"
                icon="el-icon-search"
                type="primary"
                plain
                @click="onSearch"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" @click="onReset" size="mini"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <div>
          <el-button
            icon="el-icon-plus"
            type="primary"
            size="mini"
            plain
            @click="showLoading = true"
            >创建</el-button
          >
        </div>
      </el-row>
      <!--表单区域-->
      <div class="table-box">
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="tag_name" label="标签名称" />
          <el-table-column prop="directory_name" label="归属目录" />
          <el-table-column prop="subject_name" label="归属学科" />
          <el-table-column prop="username" label="创建人" />
          <el-table-column label="是否显示">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.is_show"
                :active-value="1"
                :inactive-value="0"
                @change="switchChange"
              />
            </template>
          </el-table-column>
          <el-table-column width="150" label="操作">
            <template slot-scope="{ row }">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-edit"
                circle
                @click="onEdit(row.id)"
              />&nbsp;
              <el-popconfirm
                title="Darling,确定删除咩？"
                @confirm="onDelete(row.id)"
              >
                <el-button
                  slot="reference"
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  style="margin-left: 20px"
                />
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <el-row type="flex" style="height: 60px" align="middle" justify="end">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page.sync="queryData.page"
          :page-sizes="[10, 20, 80, 100]"
          :page-size="queryData.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
          :pager-count="7" >
        </el-pagination>
      </el-row>

      <!-- 新增 -->
      <el-dialog
        :title="formData.id ? '修改标签' : '新增标签'"
        :visible.sync="showLoading"
        width="40%"
        @close="onCancel"
      >
        <el-form
          :model="formData"
          ref="form"
          :rules="rules"
          label-width="80px"
          :inline="false"
          size="normal"
        >
          <el-form-item label="归属学科" prop="subject_id">
            <el-select
              v-model="formData.subject_id"
              placeholder="请选择学科"
              size="mini"
              @change="allListChange"
            >
              <el-option
                v-for="item in allList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归属目录" prop="directory_id">
            <el-select
              v-model="formData.directory_id"
              placeholder="请选择目录"
              size="mini"
            >
              <el-option
                v-for="item in catalogueList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标签名称" prop="tag_name">
            <el-input
              v-model="formData.tag_name"
              placeholder="请输入标签名称"
              style="width: 280px"
              size="mini"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort" style="display: inline-block">
            <el-input-number
              v-model="formData.sort"
              :min="1"
              :max="100"
              label="描述文字"
            />
          </el-form-item>
          <el-form-item
            label="是否显示"
            prop="is_show"
            style="display: inline-block"
          >
            <el-switch
              v-model="formData.is_show"
              :active-value="1"
              :inactive-value="2"
              active-text="是"
              inactive-text="否"
            >
            </el-switch>
          </el-form-item>
        </el-form>

        <span slot="footer">
          <el-button @click="showLoading = false">取消</el-button>
          <el-button type="primary" @click="btnOk">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  addLabelAPI,
  deleteLabelAPI,
  editLabelAPI,
  getLabelAPI,
  getLabelInputAPI,
  putLabelAPI,
} from "@/api/label";
export default {
  name: "RowedLink",
  data() {
    return {
      list: [],
      allList: [],
      catalogueList: [],
      // 列表数据
      queryData: {
        tag_name: "",
        subject_id: "",
        directory_id: "",
        is_show: "",
        page: 1,
        limit: 10,
      },
      formData: {
        tag_name: "",
        subject_id: "",
        directory_id: "",
        is_show: "",
        sort: 10,
      },
      total: 0,
      showLoading: false,
      // 校验
      rules: {
        tag_name: [{ required: true, message: "不能为空", trigger: "blur" }],
        subject_id: [{ required: true, message: "不能为空", trigger: "blur" }],
        directory_id: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      options: [
        {
          value: 1,
          label: "显示",
        },
        {
          value: 2,
          label: "隐藏",
        },
      ],
    };
  },
  created() {
    this.initData();
    this.getData();
  },
  methods: {
    // 渲染列表请求
    async initData() {
      const res = await getLabelAPI(this.queryData);
      // console.log(res);
      this.list = res.list;
      this.total = res.total;
    },
    // 获取input下拉框数据
    async getData() {
      const res = await getLabelInputAPI();
      // console.log(res);
      this.allList = res;
      // console.log(this.allList);
    },
    // 获取联动input下拉框数据
    allListChange(event) {
      // console.log(event);
      let children = this.allList.find((item) => item.id === event);
      this.catalogueList = children.children;
      this.queryData.directory_id = "";
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },
    // 页码切换事件
    currentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 搜索
    onSearch() {
      this.queryData.page = 1;
      this.initData();
    },
    // 重置
    onReset() {
      this.queryData = {
        role_name: "",
        page: 1,
        limit: 10,
      };
      this.initData();
    },
    // 表单重置
    onCancel() {
      this.formData = {
        tag_name: "",
        subject_id: "",
        directory_id: "",
        is_show: "",
        sort: 10,
      };
      // 移除校验
      this.$refs.form.clearValidate();
    },
    // 确定提交
    async btnOk() {
      // 校验
      this.$refs.form.validate();
      this.formData.id ? await putLabelAPI(this.formData.id,this.formData) : await addLabelAPI(this.formData)
      this.$message.success("操作成功");
      this.showLoading = false;
      this.initData();
    },
    // 回显
    async onEdit(id) {
      const res = await editLabelAPI(id);
      this.formData = res;
      this.showLoading = true;
    },
    // 删除
    async onDelete(id) {
      await deleteLabelAPI(id);
      this.$message.success("操作成功");
      if (this.queryData.page > 1 && this.list.length === 1)
        this.queryData.page--;
      this.initData();
    },
    // switch切换
    switchChange() {
      this.$message.success("切换成功");
    },
  },
};
</script>

<style scoped>
.lshdiv {
  padding: 20px;
  background-color: rgba(234, 237, 241);
}
.container-box {
  padding: 20px;

  background-color: #fff;
}
</style>
